<template>
  <div class="w-100% h-100%">
    <div class="calender-title"></div>
    <div class="calender-body">
      <slot name="header"></slot>
      <el-calendar v-model="date" ref="calendar">
        <template v-if="$slots.calHeader" #header>
            <slot name="calHeader"></slot>
        </template>
        <template v-else #header="{date}">
          <span>{{ date }}</span>
          <el-button-group>
            <el-button size="small" @click="selectDate('prev-month')">上个月</el-button>
            <el-button size="small" @click="selectDate('today')">今天</el-button>
            <el-button size="small" @click="selectDate('next-month')">下个月</el-button>
            <el-button size="small" @click="detailClick">详情</el-button>
          </el-button-group>
        </template>
        <template #date-cell="{ data }">
          <div v-if="alarmFn(data.day) == null" :style="{height:props.cellHeight}" class="all-center">
            {{data.date.getDate()}}
          </div>
          <div v-else :style="{height:props.cellHeight}" class="all-center">
            <template v-if="alarmFn(data.day) == 0">
              <span class="alarm-date green">{{data.date.getDate()}}</span>
              <svg-load name="smile"></svg-load>
            </template>
            <template v-else-if="alarmFn(data.day) == 1">
              <span class="alarm-date orange">{{data.date.getDate()}}</span>
              <svg-load name="average"></svg-load>
            </template>
            <template v-else>
              <span class="alarm-date red">{{data.date.getDate()}}</span>
              <svg-load name="dissatisfied"></svg-load>
            </template>
          </div>
        </template>
      </el-calendar>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref , watch} from 'vue';
import SvgLoad from "/@/components/SvgLoad/SvgLoad.vue";
import dayjs from "dayjs";
import type { CalendarDateType, CalendarInstance } from 'element-plus'
interface AlarmCalendarType {
  time?:string;
  alarmFn?:Function;
  cellHeight?:string;
}
const props = withDefaults(defineProps<AlarmCalendarType>(),{
  time:"2023-10-10",
  alarmFn:()=>{return 1;},
  cellHeight:"6vh"
});
const emit = defineEmits(['update:time','changeMonth','detailClick'])
const date = ref<Date>(new Date(props.time));
watch(date , (val:Date,oldValue:Date)=>{
  emit('update:time',dayjs(val).format("YYYY-MM-DD"));
  if (val.getMonth() !== oldValue.getMonth()){
    emit('changeMonth',dayjs(val).format("YYYY-MM-DD"));
  }
})
const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
const detailClick = () =>{
  emit('detailClick' , dayjs(date.value).format("YYYY-MM-DD"));
}



</script>
<style scoped>


.el-calendar{
  --el-calendar-border:unset;
  --el-calendar-cell-width:unset;
  --el-calendar-header-border-bottom : 1px solid #ccc;
}
.all-center{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.all-center :deep(svg){
  height: 75%;
  width: 75%;
}
.alarm-date{
  position: absolute;
  top: 0;
  right: 0;
  font-size: .9rem;
  font-weight: 900;
}
.green{
  color: #13E064;
}
.orange{
  color: #FF7B15;
}
.red{
  color: #E6341D;
}
:deep(.el-calendar-table .el-calendar-day){
  padding: 0;
}
:deep(.el-calendar__body){
  padding-bottom: 0;
}
:deep(.el-calendar__header){
  padding: 5px 20px;
}

</style>